const React = require('react');
const BaseDemo = require('../BaseDemo');
const classnames = require('classnames');
const Input = require('Input');
const InputNumber = require('InputNumber');
const CheckBoxGroup = require('CheckBoxGroup');
const RadioGroup = require('RadioGroup');
const DateTime = require('DateTime');
const Select = require('Select');
const TextArea = require('TextArea');
const Upload = require('Upload');
const Tile = require("../Tile");
const Label = require('Label');
const FormControl = require('FormControl');
const Form = require('Form');
const Card = require('Card');
const Table = require('Table');
const Button = require('Button');
const SimpleForm = require('business/SimpleForm');

class InputPage extends BaseDemo{


    constructor(props){
        super(props);

        this.state = {
            data: []
        }

        this.rowIndex = 0;
    }

    renderByConfig() {
        let formData = {
            action: "asdasdasd",
            method: "post",
            props: {
                layout: "stack-inline",
                labelWidth: "120",
                useDefaultSubmitBtn: true,
                submitText: "",
                target: "",
                className: "",
                style: {}
            },
            items: [
                {name: "shortName", label: "企业简称：", type: "text", props: {}, rules: {required: true}, messages: {}},
                {name: "name", label: "企业名称：", type: "text", props: {}, rules: {}, messages: {}},
                {name: "email", label: "企业联系邮箱：", type: "text", props: {}, rules: {}, messages: {}},
                {name: "tel", label: "企业联系电话：", type: "text", props: {}, rules: {}, messages: {}},
                {type: "row", props: {className: "cm-form-inline"}, children: [
                    {name: "province", label: "详细地址：", type: "select", props: {
                        data: [{id: "0", text: "北京"},{id: "1", text: "上海"}]
                    }, rules: {}, messages: {}},
                    {name: "city", label: "", type: "select", props: {
                        data: [{id: "0", text: "海淀"},{id: "1", text: "浦东"}]
                    }, rules: {}, messages: {}},
                ]},
                {name: "address", label: "&nbsp;", type: "textarea", props: {
                    itemStyle: {height: 150}
                }, rules: {}, messages: {}},
            ]
        };

        let formProps = Object.assign({}, formData.props||{});
        this.mergeProps(formProps, formData, ["action","method","encType"]);

        this.keyIndex = 0;

        return <Form {...formProps}>
            {this.renderItems(formData.items)}
        </Form>
    }

    renderItems(items){
        if(items){
            return items.map((item)=>{
                if(item.type !== "row"){
                    let itemProps = Object.assign({}, item.props||{});
                    this.mergeProps(itemProps, item, ["name","type","rules","messages"]);
                    itemProps.key = this.keyIndex++;
                    return <FormControl {...itemProps} label={item.label} onChange={(value)=>{item.value = value}}/>
                }else{
                    return this.renderFormRow(item);
                }
            });
        }
        return null;
    }

    /**
     *
     * @param item
     */
    renderFormRow(item){
        let items = this.renderItems(item.children);
        return <Form.Row {...item.props} key={this.keyIndex++}>
            {items}
        </Form.Row>
    }

    renderTableForm(){
        if(this.state.data){
            return this.state.data.map((item)=>{
                let tds = item.cells.map((child, index)=>{
                    let itemProps = Object.assign({}, child.props||{});
                    this.mergeProps(itemProps, child, ["value","name","type","rules","messages"]);
                    return <td key={index}><FormControl {...itemProps} label={item.label}/></td>
                });
                return <tr key={item.key} data-index={item.key}>
                    {tds}
                </tr>
            });
        }
        return null;
    }

    addRow(){
        let data = this.state.data;

        this.rowIndex ++;
        // data.push(
        //     {
        //         key: "tableRow"+this.rowIndex,
        //         data: [
        //             <FormControl name="entName" value="111" rules={{required: true}}/>,
        //             <FormControl name="loopDomain" type="textarea" rules={{required: true}}/>,
        //             <FormControl name="url" type="textarea" rules={{required: true}}/>,
        //             <FormControl name="clientIP" type="select" rules={{required: true}} data={[{id: "0", text: "北京"},{id: "1", text: "上海"}]}/>,
        //             <FormControl name="district" type="select" rules={{required: true}} data={[{id: "0", text: "北京"},{id: "1", text: "上海"}]}/>
        //         ]
        //     }
        // );
        this.refs.table.addRow({
            id: "tableRow"+this.rowIndex,
            domain: <FormControl　name="domain" type="text" value="www.baidu.com"/>,
            loopDomain: <FormControl name="loopDomain" type="textarea"/>,
            url: <FormControl name="url" type="textarea" />,
            clientIP: <FormControl name="clientIP" type="select" data={[{id: "0", text: "北京"},{id: "1", text: "上海"}]}/>,
            district: <FormControl name="district" type="select" data={[{id: "0", text: "北京"},{id: "1", text: "上海"}]}/>
        });
    }

    removeRow(){
        let data = this.refs.table.getData();
        data.splice(0,1);
        this.setState({data});
    }

    getTableFormData(){
        let data = this.refs.table.getData();
        if(data){
            let params = data.map(function(item){
                let itemData = item.data;
                let param = {};
                for(let keyName in itemData){
                    if(typeof itemData[keyName] == 'object' && React.isValidElement(itemData[keyName])){
                        param[keyName] = itemData[keyName].getValue();
                    }
                }

                return param;
            });

            console.log(params);
        }
    }

    /**
     *
     * @param target
     * @param source
     * @param props
     */
    mergeProps(target, source, props){
        if(props){
            props.forEach(function(prop){
                if(source[prop] != undefined){
                    target[prop] = source[prop];
                }
            });
        }
    }


    render() {

        let groupData = [
            {id: "0", text: "iPhone"},
            {id: "1", text: "Android"},
            {id: "2", text: "WinPhone"}
        ];

        return (
            <div className="container">
                <Tile header={"基本使用"}>
                    {/*<Card title="企业基本信息">*/}
                        {/*<Form layout={"stack"} labelWidth="120">*/}
                            {/*<FormControl type="text" name="name" label="企业简称："  required rules={{noSpecial: true, maxLength: 15, minLength: 6}}/>*/}
                            {/*<FormControl type="text" name="age" label="企业名称："  required/>*/}
                            {/*<FormControl type="text" name="age" label="企业联系邮箱："  required/>*/}
                            {/*<FormControl type="text" name="age" label="企业联系电话："  required/>*/}
                        {/*</Form>*/}
                    {/*</Card>*/}

<Card title="1">
                    <SimpleForm data={{
    "method": "get",
    "action": "",
    "layout": "stack-inline",
    "labelWidth": 100,
    "items": [
        {
            "name": "row",
            "type": "row",
            "children": [
                {
                    "name": "inputnumber",
                    "type": "inputnumber",
                    "label": "阿萨德"
                },
                {
                    "name": "label",
                    "type": "label",
                    "label": "Undefined"
                }
            ],
            "className": "cm-form-inline"
        },
        {
            "name": "row",
            "type": "row",
            "children": [
                {
                    "name": "input",
                    "type": "input",
                    "label": "file"
                },
                {
                    "name": "button",
                    "type": "button",
                    "label": "liulan..."
                }
            ],
            "className": "cm-form-inline"
        }
    ]
}}></SimpleForm></Card>

                    <Card title="企业基本信息">
                        {this.renderByConfig()}
                    </Card>

                    <Card title="域名配置">
                        <Button onClick={this.addRow.bind(this)}>添 加</Button>
                        <Button onClick={this.removeRow.bind(this)}>删 除</Button>
                        <Button onClick={this.getTableFormData.bind(this)}>获取数据</Button>

                        <Table ref="table" data={[]} columns={
                            [
                                {name: "domain", text: "域名"},
                                {name: "loopDomain", text: "回源IP/回源域名"},
                                {name: "url", text: "回源检测URL"},
                                {name: "clientIP", text: "获取客户端IP"},
                                {name: "district", text: "加速区域"}
                            ]
                        }></Table>
                        {/*<table className="table-bordered">*/}
                            {/*<thead>*/}
                                {/*<tr>*/}
                                    {/*<th name="domain">域名</th>*/}
                                    {/*<th name="loopDomain">回源IP/回源域名</th>*/}
                                    {/*<th name="url">回源检测URL</th>*/}
                                    {/*<th name="clientIP">获取客户端IP</th>*/}
                                    {/*<th name="district">加速区域</th>*/}
                                {/*</tr>*/}
                            {/*</thead>*/}
                            {/*<tbody ref="domainTable">*/}
                                {/*{this.renderTableForm()}*/}
                            {/*</tbody>*/}
                        {/*</table>*/}
                    </Card>

                    <Card title="企业基本信息">
                        <Form layout={"stack-inline"} labelWidth="120" tipAuto={true}>
                            <FormControl type="text" name="shortName" label="企业简称：" placeholder="企业简称" required rules={{noSpecial: true, maxLength: 15, minLength: 6}}/>
                            <FormControl type="text" name="name" label="企业名称："  required value="111" readOnly={true}/>
                            <FormControl type="text" name="email" label="企业联系邮箱："  required rules={{email: true}}/>
                            <FormControl type="text" name="tel" label="企业联系电话："  required rules={{mobile: true}} maxLength={11}/>
                            <Form.Row className="cm-form-inline">
                                <FormControl type="select" name="province" label="详细地址：" required data={[{id: "0", text: "北京"},{id: "1", text: "上海"}]}></FormControl>
                                <FormControl type="select" name="city" required data={[{id: "0", text: "海淀"},{id: "1", text: "浦东"}]}/>
                            </Form.Row>
                            <FormControl type="textarea" label="&nbsp;" name="address" itemStyle={{height: 150}} required></FormControl>
                            <Form.Row className="cm-form-inline" style={{display: "none"}}>
                                <FormControl type="text" name="hiddenE" label=""  required rules={{email: true}}/>
                            </Form.Row>
                        </Form>
                    </Card>

                    <Card title="企业基本信息">
                        <Form layout={"inline"}>
                            <FormControl type="text" name="name" label="企业简称："  required rules={{noSpecial: true, maxLength: 15, minLength: 6}}/>
                            <FormControl type="text" name="age" label="企业名称："  required/>
                            <FormControl type="text" name="age" label="企业联系邮箱："  required/>
                            <FormControl type="text" name="age" label="企业联系电话："  required/>
                        </Form>
                    </Card>
                </Tile>

                <Tile header={"Ajax提交"}>
                    <Form action="xxxxx" layout="stack" method="ajax">
                        <FormControl type="text" name="name" label="姓名"  grid={1} required rules={{noSpecial: true, maxLength: 15, minLength: 6}}/>
                        <FormControl type="number" name="age" label="年龄"  grid={1} required/>
                        <FormControl type="datetime" name="activeTime" label="时间:" grid={1} required></FormControl>
                        <FormControl type="select" name="area" label="区域:"  required data={[{id: "0", text: "中国"},{id: "1", text: "美国"}]}  grid={1}></FormControl>
                        <FormControl type="radio" name="type" label="选择:" required data={groupData}></FormControl>
                        <FormControl type="file" name="file" label="选择:" grid={1} required></FormControl>
                    </Form>
                </Tile>
            </div>
        );
    }
}

module.exports = InputPage;
